<div class="login-container">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title">用户登录</h3>
    </div>
    <div class="panel-body">
      <form role="form"  #form="ngForm" (ngSubmit)="form.valid && doLogin()" class="form-horizontal">
        <div class="form-group">
          <label for="userName" class="col-sm-2 control-label">用户名：</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" name="userName" id="userName" placeholder="请输入用户名..." required
                   [(ngModel)]="user.userName"
                   minlength="2"
                   maxlength="30"
                   #userName="ngModel">
            <!--<div [hidden]="userName.valid || userName.pristine" class="alert alert-danger"> 用户名 为必填项</div>-->
            <div [hidden]="!userName.dirty || userName.valid" class="alert alert-danger"> 用户名不合法，字符长度为2~30位</div>
          </div>

        </div>
        <div class="form-group">
          <label for="password" class="col-sm-2 control-label">密码：</label>
          <div class="col-sm-10">
            <input type="password" class="form-control" id="password" required [(ngModel)]="user.password" name="password" minlength="6" maxlength="30"/>
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-offset-2 col-sm-10">
            <input type="submit" class="btn" required value="登录" [disabled]="!form.form.valid">
          </div>
        </div>
      </form>
    </div>
  </div>
</div>
